<template>
  <div class="out_park_pay">
    <el-tabs v-model="activeName" style="height: 100%;" @tab-click="handleClick" type="border-card">
      <el-tab-pane style="height: 100%;" label="未缴费" name="second">
        <noPay ref="secondMethod" />
      </el-tab-pane>
      <el-tab-pane style="height: 100%;" label="已缴费" name="third">
        <paid ref="thirdMethod"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import noPay from './components/noPay.vue'
  import paid from './components/paid.vue'

  export default {
    components: { noPay, paid },
    data() {
      return {
        activeName: 'second'
      }
    },

    mounted() {
      if(location.hash.split("#")[2] != null){
        this.activeName = location.hash.split("#")[2]
      }
    },

    methods: {
      handleClick(tab, event) {
        location.hash = this.$route.path + "#" + tab.name;
      }
    }
  }
</script>

<style scoped>
  .out_park_pay {
    padding: 8px 20px;
    height: 100%;
    width: 100%;
    position: absolute;
  }
  /deep/ .el-tabs__content{
    height: calc(100% - 50px);
  }



</style>
